import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../../../../model/taskModel.dart';

class ProductLinkSection extends StatelessWidget {
  final List<ProductModel> products;
  final VoidCallback onTap;

  const ProductLinkSection({
    Key? key,
    required this.products,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.grey[900],
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Expanded(
              child: Text(
                'Link Products',
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),
            ),
            if (products.isNotEmpty) ...[
              Row(
                children: _buildProductItems(),
              ),
              SizedBox(width: 8),
            ],
            Icon(Icons.arrow_forward_ios, color: Colors.grey[400], size: 16),
          ],
        ),
      ),
    );
  }

  List<Widget> _buildProductItems() {
    List<Widget> items = [];

    // 决定显示多少个商品
    int displayCount = products.length > 3 ? 3 : products.length;

    for (int i = 0; i < displayCount; i++) {
      // 如果是第三个位置且总数大于3，显示特殊的"+N"卡片
      if (i == 2 && products.length > 3) {
        items.add(
            _buildMoreProductsCard(products.length - 3, products[2].imageUrl));
      } else {
        items.add(_buildProductCard(products[i], i));
      }
    }

    return items;
  }

  Widget _buildProductCard(ProductModel product, int index) {
    return Container(
      width: 40,
      height: 40,
      margin: EdgeInsets.only(left: index > 0 ? 4 : 0),
      child: CachedNetworkImage(
        imageUrl: product.imageUrl,
        fit: BoxFit.cover,
        placeholder: (context, url) => Container(
          color: Colors.grey[700],
          child: Icon(
            Icons.shopping_bag,
            color: Colors.white,
            size: 16,
          ),
        ),
        errorWidget: (context, url, error) => Container(
          color: Colors.grey[700],
          child: Icon(
            Icons.error,
            color: Colors.red,
            size: 16,
          ),
        ),
      ),
    );
  }

  Widget _buildMoreProductsCard(int remainingCount, String backgroundImageUrl) {
    return Container(
      width: 40,
      height: 40,
      margin: EdgeInsets.only(left: 4),
      child: Stack(
        children: [
          // 背景图片
          CachedNetworkImage(
            imageUrl: backgroundImageUrl,
            fit: BoxFit.cover,
            width: double.infinity,
            height: double.infinity,
            placeholder: (context, url) => Container(
              color: Colors.grey[700],
            ),
            errorWidget: (context, url, error) => Container(
              color: Colors.grey[700],
            ),
          ),
          // 黑色半透明遮罩
          Container(
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.6),
            ),
          ),
          // "+N"文字
          Center(
            child: Text(
              '+$remainingCount',
              style: TextStyle(
                color: Colors.white,
                fontSize: 12,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
